﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="SonCa.SocialNetwork.Accounts.Login" MasterPageFile="~/AccountMaster.Master" %>

<asp:Content ContentPlaceHolderID="MainContent" ID="LoginContent" runat="server">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <link href="../css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/webwidget_slideshow_dot.js"></script>    
    <script language="javascript" type="text/javascript">
        function openWindow(filename, winname, width, height) {
            var features, top, left;
            left = (window.screen.width - width) / 2;
            top = (window.screen.height - height) / 2;
            features = "width=" + width + ",height=" + height + ",top=" + top + ",left=" + left;
            void (window.open(filename, winname, features));
        }

        //Su dung cho facebook
        var appID = "415992755120045";
        var redirectURL = "http://localhost:41949/Accounts/FaceBook.aspx";  //url se tra lai sau khi dang nhap thanh cong, luu y url nay phai trung khop khi cau hinh app tren facebook
        var stateValue = "0";  //ko can thiet
        var scope = "email,user_birthday"; //day la nhung thong tin mo rong, nhung thong tin basic van dc lay kem theo http://developers.facebook.com/docs/authentication/permissions/
        var responseType = "token"; //token or code, default=code
        var display = "popup";  //popup,page,touch 
        var linkFaceBook = "http://www.facebook.com/dialog/oauth/?client_id=" + appID + "&redirect_uri=" + redirectURL + "&state=" + stateValue + "&scope=" + scope + "&response_type=" + responseType + "&display=" + display;

        $(function () {
            $("#demo3").webwidget_slideshow_dot({
                slideshow_time_interval: '5000',
                slideshow_window_width: '722',
                slideshow_window_height: '327',
                slideshow_title_color: '#FFF',
                soldeshow_foreColor: '#333333',
                directory: '../img/'
            });

            $("#linkForgetPassword").click(function () {
                $('#popupForgetPassword').fadeIn(300);

                var popMargTop = ($('#popupForgetPassword').height() + 24) / 2;
                var popMargLeft = ($('#popupForgetPassword').width() + 24) / 2;

                $('#popupForgetPassword').css({
                    'margin-top': -popMargTop,
                    'margin-left': -popMargLeft
                });

                $('body').append('<div id="mask"></div>');
                $('#mask').fadeIn(300);

                $("#txtEmailForgetPassword").val("");

                $("#rbSelectNewPass").prop('checked', false);
                $("#rbRestorePass").prop('checked', false);

                $("#msgReSetPassword").hide();
                $("#msgOldPassword").hide();

                return false;
            });

            $('a.close_popup, #mask').click(function () {
                $('#mask , .popupForgetPassword_box').fadeOut(300, function () {
                    $('#mask').remove();
                });
                return false;
            });

            $("#rbSelectNewPass").change(function () {
                $("#msgReSetPassword").show();
                $("#msgOldPassword").hide();
            });

            $("#rbRestorePass").change(function () {
                $("#msgReSetPassword").hide();
                $("#msgOldPassword").show();
            });

            $("#btnForgetPassword").click(function () {
                var email = $("#txtEmailForgetPassword").val();
                if ($.trim(email).length == 0) {
                    displayError("Bạn chưa nhập email");
                    $("#txtEmailForgetPassword").focus();
                    return false;
                }
                var rs = new RegExp("([A-Za-z0-9_.-]){2,}@([A-Za-z0-9_.-]){2,}.([A-Za-z0-9_.-]){2,}");
                if (email.match(rs) == null) {
                    displayError("Email không hợp lệ.");
                    $("#txtEmailForgetPassword").focus();
                    return false;
                }
                if (!document.getElementById("rbSelectNewPass").checked && !document.getElementById("rbRestorePass").checked) {
                    displayError("Lấy mật khẩu mới hay khôi phục mật khẩu ???");
                    return false;
                }
                if (document.getElementById("rbSelectNewPass").checked) {
                    $.ajax({
                        type: "POST",
                        url: "../Services/AjaxService.svc/ResetPassword",
                        data: '{"email": "' + email + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            if (msg.d == 1) {
                                $("#error_emailvalid").css("color", "green");
                                displayError("Xin vui lòng kiểm tra mail để lấy lại mật khẩu.");
                            }
                            else if (msg.d == -1) {
                                displayError("Email không tồn tại, xin kiểm tra lại.");
                            }
                            else if (msg.d == 0) {
                                displayError("Có lỗi xảy ra, xin hãy thử lại.");
                            }
                        },
                        error: function () { }
                    });
                }
                if (document.getElementById("rbRestorePass").checked) {
                    $.ajax({
                        type: "POST",
                        url: "../Services/AjaxService.svc/RecoverPassword",
                        data: '{"email": "' + email + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            if (msg.d == 1) {
                                $("#error_emailvalid").css("color", "green");
                                displayError("Xin vui lòng kiểm tra mail để lấy lại mật khẩu.");
                            }
                            else if (msg.d == -1) {
                                displayError("Email không tồn tại, xin kiểm tra lại.");
                            }
                            else if (msg.d == 0) {
                                displayError("Có lỗi xảy ra, xin hãy thử lại.");
                            }
                        },
                        error: function () { }
                    });
                }
            });

            function displayError(error) {
                $("#error_emailvalid").show('slow');
                $("#error_emailvalid").text(error).delay(3000);
                $("#error_emailvalid").hide('slow');
            }
        });
    </script>
   
    <div class="head">
                <div class="clearer">
                </div>
                <div class="star">
                    <span style="color: #fff;">Cloud Karaoke</span> trên các thiết bị bắt đầu tính phí
                    từ ngày <span style="color: #ff1d58;"><strong>01/03/2013</strong></span></div>
                <div class="row">
                    <div class="span8">
                        <div class="slider_area standard">
                            <div class="theme-default ">
                                <div style="height: 327px; padding-top: 1px;">
                                    <div id="demo3" class="webwidget_slideshow_dot">
                                        <ul>
                                            <li><a href="#" title="Sky">
                                                <img src="../img/1.jpg" width="722" height="327" alt="slideshow_large" /></a></li>
                                            <li><a href="#" title="Sea">
                                                <img src="../img/2.jpg" width="722" height="327" alt="slideshow_large" /></a></li>
                                            <li><a href="#" title="Flower">
                                                <img src="../img/3.jpg" width="722" height="327" alt="slideshow_large" /></a></li>
                                            <li><a href="#" title="Treelink4">
                                                <img src="../img/4.jpg" width="722" height="327" alt="slideshow_large" /></a></li>
                                        </ul>
                                        <div style="clear: both">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span4 gallery_page">
                        <form class="form-signin" runat="server" id="frmLogin">

                        <!-- Popup Quen mat khau -->
                        <div id="popupForgetPassword" class="popupForgetPassword_box">
                            <div align="center">
                                <a href="#" class="close_popup"><img src="../img/close.png" class="btn_close" title="Close Window" alt="Close" /></a>                                
                                <div>                                    
                                    <input type="radio" id="rbSelectNewPass" name="grouppass" /> Lấy mật khẩu mới
                                    <input type="radio" id="rbRestorePass" name="grouppass" style="margin-left:50px" /> Khôi phục mật khẩu
                                </div><br />
                                <div id="msgReSetPassword" style="display:none">
                                    Nhập email bạn đã đăng ký, chúng tôi sẽ gửi mật khẩu mới cho bạn.<br />
                                    <span>Lưu ý : Khi đăng nhập bạn nên đổi mật khẩu để tiện cho việc đăng nhập lần sau.</span>
                                </div>
                                <div id="msgOldPassword" style="display:none">
                                    Nhập email bạn đã đăng ký, chúng tôi sẽ gửi lại mật khẩu cho bạn.
                                </div>
                                <br />
                                <div>       
                                    <span id="error_emailvalid" style="display:none;color:Red"></span><br />
                                    <span>Nhập email đăng ký : </span>     
                                    <input type="text" id="txtEmailForgetPassword"/>
                                </div><br />                                
                                <div>
                                    <input type="button" id="btnForgetPassword" value="OK" class="dangnhap" />
                                </div>
                            </div>
                        </div>
                        <!-- End Popup Quen mat khau -->

                        <div style="color: #fff; margin-top: 5px;" class="cpos_1">
                            Bạn chưa có tài khoản?</div>
                        <div class="btn_dangky cpos_2">
                            <a href="Register.aspx">Đăng ký</a></div>
                        <div class="clearer">
                        </div>
                        <div class="title">
                            Đăng nhập thành viên</div>
                        <table width="100%">
                            <tr>
                                <td>
                                    Tên đăng nhập
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="txtUsername" CssClass="input-block-level" placeholder="Tên đăng nhập"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Mật khẩu
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="txtPassword" CssClass="input-block-level" placeholder="Mật khẩu"
                                        TextMode="Password"></asp:TextBox>
                                </td>
                            </tr>
                        </table>
                        <div class="mgtop10 line">
                            <a href="#" class="cpos_2" id="linkForgetPassword">Quên mật khẩu?</a>
                            <label class="checkbox">
                                <asp:CheckBox runat="server" ID="chkRemember" />
                                Duy trì đăng nhập
                            </label>
                            <asp:Button runat="server" ID="btnLogin" Text="Đăng nhập" CssClass="dangnhap" 
                                onclick="btnLogin_Click" /><br />
                            <p style=" margin-top:5px; color:Red;"><asp:Label ID="lblmes" runat="server"></asp:Label></p>
                            <div class="clearer">
                            </div>
                        </div>
                        <div>
                            Đăng nhập qua trang MXH khác.
                        </div>
                        <div class="loginMore mgtop5" style="height: 30px;">                            
                            <%--<asp:Button ID="btnYahooLogin" CssClass="icoyahoo" runat="server" Text="" ToolTip="Yahoo" />
                            <asp:Button ID="btnTwitterLogin" CssClass="icotwitter" runat="server" Text="" ToolTip="Twitter" />
                            <asp:Button ID="btnGoogleLogin" CssClass="icogplus" runat="server" Text="" ToolTip="Google" />
                            <asp:Button ID="btnFacebookLogin" CssClass="icofacebook" runat="server" Text="" ToolTip="Facebook" />--%>

                            <a class="icoyahoo" title="Yahoo" href="javascript:void(0);" id="btnYahooLogin"></a>
                            <a class="icotwitter" title="Twitter" href="javascript:void(0);" id="btnTwitterLogin"></a>
                            <a class="icogplus" title="Google+" href="javascript:void(0);" id="btnGoogleLogin"></a>
                            <a class="icofacebook" title="Facebook" href="javascript:void(0);" id="btnFacebookLogin" onclick="openWindow(linkFaceBook,'Login',415,305)"></a>
                        </div>
                        <div class="clearer">
                        </div>
                        </form>
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
                <div class="clearer">
                </div>
            </div>

            <!--End head -->
            <div class="contenu">
                <div class="row-fluid">
                    <div class="span6 marketing cpos_1">
                        <div class="title2">
                            tin tức & sự kiện</div>
                        <h4>
                            Subheading</h4>
                        <p>
                            Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore.sed do eiusmod tempor incididunt ut labore.</p>
                        <h4>
                            Subheading</h4>
                        <p>
                            Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
                            purus sit amet fermentum.</p>
                    </div>
                    <div class="span9">
                        <div class="span4 thumbnail article-box">
                            <div class="thumbnail-holder">
                                <a href="#">
                                    <img src="../img/img1.jpg" width="100%" />
                                </a>
                            </div>
                            <div class="row-fluid">
                                <h4 class="title3">
                                    <a href="#">tui hát </a>
                                </h4>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet conse ctetur adipisicing.</p>
                        </div>
                        <!--/span-->
                        <div class="span4 thumbnail article-box">
                            <div class="thumbnail-holder">
                                <a href="#">
                                    <img src="../img/img2.jpg" width="100%" />
                                </a>
                            </div>
                            <div class="row-fluid">
                                <h4 class="title3">
                                    <a href="#">cuộc thi karaoke </a>
                                </h4>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet conse ctetur adipisicing.</p>
                        </div>
                        <!--/span-->
                        <div class="span4 thumbnail article-box">
                            <div class="thumbnail-holder">
                                <a href="#">
                                    <img src="../img/img3.jpg" width="100%" />
                                </a>
                            </div>
                            <div class="row-fluid">
                                <h4 class="title3">
                                    <a href="#">sơn ca offline </a>
                                </h4>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet conse ctetur adipisicing.</p>
                        </div>
                        <!--/span-->
                    </div>
                </div>
                <div class="clearer">
                </div>
            </div>

</asp:Content>